<template>
  <div class="box">
    <h1>toRefs的使用</h1>
    <h3>姓名：{{ user.name }}</h3>
    <h3>年龄：{{ user.age }}</h3>
    <h3>性别：{{ user.sex }}</h3>

    <hr>
    <h3>姓名：{{ name }}</h3>
    <h3>年龄：{{ age }}</h3>
    <h3>性别：{{ sex }}</h3>

    <button @click="change">修改值</button>

  </div>
</template>

<script>
import {reactive,toRefs} from "vue"
export default {
    setup(){
        //1.通过ref定义响应式数据
        let user = reactive({
            name:"妲己",
            age:18,
            sex:"女"
        })

        function change(){
            user.name += "-";
            user.age += 1;
            user.sex += "@"
        };

    
        //2.return
        return {
            user,
            // age:18,
            // name:"妲己",
            // sex:"女",
            ...toRefs(user),
            change
        }
    }
}
</script>

<style>

</style>